@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
body{
    background:#222;
}
.web{ 
        position: relative;
        width:100%;
        height:100%;

                >nav{
                   
                    z-index: 1000;
                    .nav_box{
                            
                            .logo{
                                display:flex;
                                display:-webkit-flex;
                                align-items: center;
                            }
                    }
                }//nav
        >.content{
              
                position: absolute;
                left:0;
                right: 0;
                bottom:0;
                top:50px;
               
                
                /*height: calc(100% - 50px);*/
                overflow: auto;
                .banner_img{
                    >img{
                        width:100%;
                    }
                }  
                >.remen_A{
                    background:#fff;
                        >.row{
                                width:65%;
                                margin:0 auto;
                                >.left{
                                    position: relative;
                                    background:url(../images/game_bg_02.png) no-repeat;
                                    padding-top:450px;
                                    >aside{
                                        background: url(../images/hot-icon.png) no-repeat;
                                        width: 42px;
                                        height:102px;
                                        position: absolute;
                                        text-align: center;
                                        
                                        top:0;
                                        >span{
                                           font-size:20px;
                                           color:#fff;
                                           
                                        }
                                    }
                                }
                                >.right{
                                    // padding:0;
                                    >h2{
                                          color:#292929;
                                          text-align: right;
                                    }
                                    >p{
                                          font-size:12px;
                                          color:#898989;
                                          text-align: right;  
                                          line-height: 30px;
                                    }
                                    >.imgbox{
                                          display:flex;
                                          display:-webkit-flex;
                                          flex-wrap: wrap;
                                          justify-content: space-between;
                                          >div{
                                              width:48%;
                                            //   padding:10px;
                                            //   padding-right: 0;
                                             margin-bottom: 30px;
                                              >img{
                                                  width:100%;
                                                  border-radius: 10px;
                                              }
                                          }
                                    }
                                }
                        }//row
                }//remen_A
                >.remen_B{
                    background:#fff;
                        >.row{
                                width:65%;
                                margin:0 auto;
                                >.right{
                                    position: relative;
                                    left:r(30);
                                    background:url(../images/game_bg_01.png) no-repeat;
                                    padding-top:450px;
                                }
                                >.left{
                                    // padding-right:15px;
                                    >h2{
                                          color:#292929;
                                          text-align: left;
                                    }
                                    >p{
                                          font-size:12px;
                                          color:#898989;
                                          text-align: right;  
                                          line-height: 30px;
                                    }
                                    >.imgbox{
                                          display:flex;
                                          display:-webkit-flex;
                                          flex-wrap: wrap;
                                          justify-content: space-between;
                                          >div{
                                              width:48%;
                                            //   padding:10px;
                                            //   padding-right: 0;
                                             margin-bottom: 30px;
                                              >img{
                                                  width:100%;
                                                  border-radius: 10px;
                                              }
                                          }
                                    }
                                }
                        }//row
                }//remen_B
                >.moregame{
                    padding-bottom:50px;
                    width:100%;
                    background: #ffffff;
                    >.row{
                        width:65%;
                        margin: 0 auto;
                        >h1{
                            color:#000;
                        }
                        >.game_box{
                            display: flex;
                            display: -webkit-flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                            >div{
                                margin-top:15px;
                                margin-bottom:20px;
                                position: relative;
                                width:32%;
                                >img{
                                    width:100%;
                                    border-radius: 10px;
                                }
                                >P{
                                    // width:100%;
                                    padding:10px;
                                    position: absolute;
                                    top:0;
                                    font-size:12px;
                                    color:#fff;
                                    display: none;
                                }
                                >aside{
                                    margin-top:13px;
                                    color:#292929;
                                    font-size:14px;
                                    text-align: center;
                                }
                            }
                            >div:hover>p{
                                display: block;
                            }
                        }
                    }
                }
                >footer{
                   
                    padding-top:30px;
                    padding-bottom:60px;
                    >.foot_row{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        width:65%;
                        margin:0 auto;
                        justify-content: space-between;
                        >.footer_content{
                            >ul{
                                display:flex;
                                display:-webkit-flex;
                                >li{
                                    margin-right: r(15);
                                    font-size:14px;
                                    list-style: none;
                                    color:#A1A3AB;
                                }   
                                
                            }
                            >p{
                                    font-size:12px;
                                    color:#A1A3AB;
                            }
                        }
                        >ul{
                            position: relative;
                            display: flex;
                            display: -webkit-flex;
                            >li{
                                list-style: none;
                                margin-left:r(20);
                            }
                            >li:nth-of-type(2):hover~div{
                                display:inline-block;
                            }  
                            >div{
                                display: none;
                                position: absolute;
                                top:-230%;
                                left:55%;
                                transform: translateX(-45%);
                                text-align: center;
                                >img{
                                    width:100%;
                                }
                            } 
                        }
                    }
                }
              
    }//content
}//web

@media only screen and (min-width: 768px) {
    html,
    body {
        min-width: 1141px;
        .web{
            >nav{
                
                    position: absolute;
                    z-index: 999;
                    top:0;
                    left:50%;
                    transform: translateX(-50%);
                    margin:0 auto;
                    margin-bottom:0;
                    width:65%;
                    border: none;
            }
        }
     
    }
}
@media only screen and (max-width: 768px) {

        // min-width: 2000px;
        .web{
            width:100%;
            // overflow: hidden;
            >nav{
                    width:100%;
              
            }//nav
            >.content{
                width:100%;
                // overflow: hidden;
                >.remen_A{
                    background:#fff;
                        >.row{
                                width:100%;
                                margin:0 auto;
                        }//row
                }//remen_A
                >.remen_B{
                    background:#fff;
                        >.row{
                                width:100%;
                                margin:0 auto;
                        }//row
                }//remen_B
               
                >.moregame{
                    padding-bottom:50px;
                    width:100%;
                    background: #ffffff;
                    >.row{
                        width:100%;
                        margin: 0 auto;
                        >h1{
                            color:#000;
                        }
                        >.game_box{
                    
                            >div{
                        
                                width:100%;
                                >p{
                                    font-size:16px;
                                }
                             
                            }
                          
                        }
                    }
                }
                >footer{
                    padding-top:30px;
                    padding-bottom:60px;
                    >.foot_row{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        flex-wrap: wrap;
                        width:100%;
                        margin:0 auto;
                        >.footer_content{
                            width:100%;
                            >ul{
                                display:flex;
                                display:-webkit-flex;
                                >li{
                                    margin-right: r(15);
                                    font-size:14px;
                                    list-style: none;
                                    color:#A1A3AB;
                                }   
                                
                            }
                            >p{
                                    font-size:12px;
                                    color:#A1A3AB;
                            }
                        }
                    }
                }
            }//content

        }//web
     
    }